<template>
  <!-- 停/送电作业 -->
  <view>
    <view v-if="listData.length > 0" class="mt-20 tickets">
      <view v-for="(item, index) in listData" :key="index" class="cu-card-wrap">
        <view class="header-wrap">
          <view class="title-wrap">
            <image class="icon" src="/static/images/gkicon1.png" mode="aspectFit"></image>
            <text class="title">停/送电作业</text>
          </view>
        </view>
        <view class="body-wrap">
          <view class="content-wrap">
            <view class="label">作业票编号：</view>
            <view class="value">{{ item.ticketCode }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">分厂：</view>
            <view class="value">{{ item.secondFactoryName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">工段/区域：</view>
            <view class="value">{{ item.areaName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">电压：</view>
            <view class="value">{{ item.electricNum + item.electricUnit }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">当前状态：</view>
            <view class="value color-A14430">{{ item.statusLabel }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">待办人：</view>
            <view class="value">{{ item.currentUserNames }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">作业票证：</view>
            <navigator :url="`/pages/jobSlip/power-cut/detail?ticketId=${item.ticketId}`" class="value color-88B4C4">
              查看详情
              <image class="icon-more" src="/static/images/more.png"></image>
            </navigator>
          </view>
        </view>
        <view class="footer-wrap">
          <view class="content-wrap"> </view>
          <view class="button-wrap">
            <button class="info-btn" v-if="item.status === '5' || item.status === '9'" @click="startPower(item)">
              送电申请
            </button>
            <button class="info-btn" @click="detail(item)">查看</button>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty></Empty>
    </view>
    <view class="submit-group">
      <button class="u-button block" :ripple="true" @click="stopPower()">停电申请</button>
    </view>
    <CuFilterTicket ref="cuFilter" :showArr="filterShowArr" @submit="filterSubmit" />
  </view>
</template>

<script>
import { getElectricList } from '@/api/spw/powerCut'
import Empty from '@/components/cu-empty/index.vue'
import CuFilterTicket from '@/components/cu-filter-ticket/cu-filter.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    Empty,
    CuFilterTicket
  },
  data() {
    return {
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      isFinished: false,
      filterShowArr: ['powerCutStatus', 'ticketCode', 'secondAreas'],
      searchParams: {}
    }
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  // 筛选按钮点击
  onNavigationBarButtonTap() {
    this.$refs.cuFilter.toggle()
  },
  onBackPress(options) {
    if (options.from === 'backbutton') {
      this.back()
      return true
    }
  },
  onLoad() {
    // 重新加载页面数据 data 为 true ,触发方式 uni.$emit('reload',true)
    uni.$on('reload', (data) => {
      if (data) {
        this.initData()
      }
    })
    // this.initData();
  },
  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    back() {
      uni.reLaunch({
        url: '/pages/work/index'
      })
    },
    filterSubmit(val) {
      this.pageNum = 1
      this.total = null
      this.searchParams = {
        ...val
      }
      this.getList()
    },
    initData() {
      this.listData = []
      this.isFinished = false
      this.pageNum = 1
      this.pageSize = 10
      this.total = null
      this.getList()
    },
    getList() {
      if (this.isFinished) {
        return
      }
      const data = {
        pageSize: 10,
        pageNum: this.pageNum,
        ...this.searchParams
      }
      if (!this.total || this.total > this.listData.length) {
        getElectricList(data)
          .then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    },

    detail({ ticketId }) {
      let url = `/pages/jobSlip/power-cut/detail?ticketId=${ticketId}`
      const _this = this
      uni.navigateTo({
        url,
        events: {
          reloadEvent: function (isReload) {
            if (isReload) {
              _this.initData()
            }
          }
        }
      })
    },
    startPower(item) {
      uni.navigateTo({
        url: `/pages/jobSlip/power-cut/flow/start?ticketId=${item.ticketId}`
      })
    },
    stopPower() {
      uni.navigateTo({
        url: '/pages/jobSlip/power-cut/flow/applyFor'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tickets {
  margin-bottom: 230rpx;
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
}

.icon-more {
  width: 32rpx;
  height: 32rpx;
  vertical-align: sub;
}
</style>
